<template>
	<view class="main">
		<view class="top">
			<view class="search">
				<image src="../../static/search.png" mode=""></image>
				<input type="text" v-model="keyWords" value="" @confirm="search" placeholder="输入业务事项名称"/>
				<view class="btn" @click="search">
					搜索
				</view>
			</view>
		</view>
		<view class="content" >
			<scroll-view scroll-y style="height: 100%;width: 100%;"  @scrolltolower="lower" scroll-y @scroll="scroll" :scroll-top="scrollTop">
				<view class="card" v-for="(item,index) in handlingList" :key="index"  @click="getItemResultDetail(item.code,item.busId),show=true">
					<view class="code-box">
						<text>{{item.code}}</text>
					</view>
					<view class="business">
						<text>{{item.name}}</text>
					</view>
					<view class="dibu">
						<view class="date">
							<text>{{item.updateTime}}</text>
						</view>
						<view class="details">
							<text :class="item.statusName=='审批中'?'c1':item.statusName=='作废'?'c2':item.statusName=='待补齐补正'?'c4':item.statusName=='同意'?'c5':'c3'">{{item.statusName}}</text>
						</view>
					</view>
				</view>
				<uni-load-more :status="status" v-if="handlingList.length > 0"></uni-load-more>
				<view class="noData" v-if="status=='noMore' && handlingList.length == 0">
					<image src="../../static/img_nodata.png"></image>
				</view>
			</scroll-view>
		</view>
		<u-mask :show="show" @click="show = false" :custom-style="{background: 'rgba(135, 136, 141, 0.15)'}">
			<view class="tanchu" >
					<u-time-line class="tancont">
						<u-time-line-item class="li-item" v-for="(item,index) in handList" :key="index">
							<template v-slot:node>
								<view class="u-node" style="background: #5b96ff;">
								</view>
							</template>
							<template v-slot:content>
								<view>
									<view class="u-order-desc">{{item.taskName}}</view>
									<view class="u-order-desc">预处理人: {{item.advanceName}}</view>
									<view class="u-order-desc">办理人: {{item.dealName}}</view>
									<view class="u-order-desc">审批意见: {{item.appOpinion}}</view>
									<view class="u-order-time">{{item.updateTime}}</view>
								</view>
							</template>
						</u-time-line-item>
					</u-time-line>
			</view>
		</u-mask>
		
		<u-back-top :scroll-top="scrollTop" @click.native="backTop"></u-back-top>
	</view>
	<!-- <image> -->
</template>

<script>
	import uniLoadMore from '@/uni-ui/libs/uni-load-more/uni-load-more.vue';
	export default{
		components: {
			uniLoadMore
		},
		data(){
			return{
				show:false,
				handlingList: [],
				handList:[],
				pageNum:1,
				pageSize:10,
				code: '',
				busId: '',
				status: 'more',
				loadmoreShow:true,
				keyWords: '',
				scrollTop:0,
			}
		},
		watch:{
			keyWords(newVal,oldVal){
				if((/^\s*$/.test(newVal))){
					this.handlingList = [];
					this.pageNum = 1;
					this.status = 'more';
					this.getItemResult();
				}
			}
		},
		created() {
			this.getItemResult()		
		},
		methods:{
			backTop(){
				this.scrollTop = 0;
			},
			scroll(e){
				this.scrollTop = e.detail.scrollTop;
			},
			search(){
				this.pageNum = 1;
				this.handlingList = [];
				this.getItemResult();
			},
			// 下拉分页
			lower() {
				if (this.status === 'noMore') {
					return;
				}
				this.pageNum++;
				this.getItemResult();
			},
			// 获取列表信息
			getItemResult(){
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				this.status = 'loading';
				this.$ajax({
					url: '/api/wwwNews/getItemResult',
					needAuth: true,
					method: 'GET',
					data: {
				       pageNum:this.pageNum,
					   pageSize:this.pageSize,
					   keyWord:this.keyWords,
					}
				}).then(res => {
					var data = res.data.records;					
					if (data.length === 0 && this.handlingList.length === 0) {
	
						this.loadmoreShow = false;
						this.status = 'noMore';
					} else if (this.pageNum < res.data.pages) {
						
						this.loadmoreShow = true;
						this.status = 'more';
					} else {
				
						this.loadmoreShow = true;
						this.status = 'noMore';
					}

					this.handlingList = this.handlingList.concat(data);
					// this.handlingList =  res.data.records
					
				}).finally(() => {
					uni.hideLoading();
				});
			},
			getItemResultDetail(code,busId){
				// console.log(code)
				// console.log(busId)
				this.handList = []
				this.$ajax({
					url: '/api/getItemResultDetail',
					method: 'GET',
					data: {
						code:code,
						busId:busId,
					}
				}).then(res => {
					var data = res.data;
					this.handList=this.handList.concat(data)
					// console.log(data)
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.noData {
		display: flex;
		justify-content: center;
		align-items: center;
		padding-top: 30rpx;
	
		image {
			width: 408rpx;
			height: 319rpx;
		}
	}
	.tanchu{
		width: 600rpx;
		height: 746rpx;
		position: fixed;
		margin-top: 280rpx;
		margin-left: 75rpx;
		background-color: #ffffff;
		display: flex;
		border-radius: 12rpx;
		overflow: hidden;
		overflow-y: scroll;
	}
	
	.tancont{
		width: 350rpx;
		height: 627rpx;
		margin-top: 60rpx;
		margin-left: 90rpx;
	}
	
	.li-item{
		margin-top: 60rpx;
	}
	
	.u-node {
			width: 24rpx;
			height: 24rpx;
			border-radius: 100rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background: #d0d0d0;
		}
		
	.u-order-desc {
		color: #333333;
		font-size: 28rpx;
		margin-bottom: 6rpx;
	}
	
	.u-order-time {
		color: #999999;
		font-size: 26rpx;
	}
		
.main{
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	height: 100%;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	.top{
		width: 100%;
		height: 102rpx;
		border-bottom: 1rpx solid #eeeeee;
		
		.search{
			// border: 1px red solid;
			box-sizing: border-box;
			padding: 0 20rpx;
			background-color: #eeeeee;
			width: 650rpx;
			height: 72rpx;
			margin: 10rpx auto;
			border-radius: 40rpx;
			display: flex;
			position: relative;
			align-items: center;
			
			image{
				width: 30rpx;
				height: 30rpx;
				margin-left: 30rpx;
			}
			
			input{
				width: 400rpx;
				height: 72rpx;
				margin-left: 21rpx;
				font-size: 24rpx;
				margin-top: 4rpx;
			}
			
			.btn{
				position: absolute;
				right: 0;
				font-size: 28rpx;
				line-height: 102rpx;
				letter-spacing: 0;
				color: #ffffff;
				width: 140rpx;
				height: 72rpx;
				background-color: #5b96ff;
				border-radius: 0rpx 40rpx 40rpx 0rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
	
	.content{
		flex: 1;
		overflow: hidden;
		box-sizing: border-box;
		
		.card{
			position: relative;
			display: flex;
			flex-direction: column;
			height: 50rpx;
			width: 690rpx;
			height: 248rpx;
			background-color: #ffffff;
			box-shadow: 2rpx 12rpx 27rpx 0rpx 
				rgba(135, 136, 141, 0.15);
			border-radius: 12rpx;
			margin-top: 53rpx;
			margin-left: 30rpx;
			
			.code-box{
				height: 81rpx;
				width: 100%;
				box-sizing: border-box;
				border-bottom: 1rpx solid #eeeeee;
				text{
					font-size: 28rpx;
					line-height: 102rpx;
					letter-spacing: 0rpx;
					color: #333333;
					margin-top: 39rpx;
					margin-left: 21rpx;
				}
			}
			
			.business{
				height: 71rpx;
				width: 632rpx;
				margin-left: 21rpx;
				margin-top: 16rpx;
				width: 632rpx;
				
				text{
					font-family: PingFang-SC-Medium;
					font-size: 28rpx;
					font-weight: normal;
					font-stretch: normal;
					line-height: 44rpx;
					letter-spacing: 0rpx;
					color: #333333;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}
			}
			
			.dibu{
				display: flex;
				width: 100%;
				align-items: center;
				
				.date{
					font-family: PingFang-SC-Medium;
					font-size: 24rpx;
					font-weight: normal;
					font-stretch: normal;
					line-height: 102rpx;
					letter-spacing: 0rpx;
					color: #999999;
					margin-left: 21rpx;
				}
				
				.details{
					margin-left: 240rpx;
					font-family: PingFang-SC-Medium;
					font-size: 28rpx;
					font-weight: normal;
					font-stretch: normal;
					line-height: 48rpx;
					letter-spacing: 0rpx;
					opacity: 0.8;
				}
			}
			
			.c1{
				color: #1975ff;
			}
			
			.c2{
				color: #666666;
			}
			
			.c3{
				color: #356874;
			}
			
			.c4{
				color: #EE7700;
			}
			
			.c5{
				color: #228B22 ;
			}
			
		}
	}
}
</style>
